<template>
  <div class="ScholarView">
    <div>
      <homePage></homePage>
    </div>
    <el-row type="flex" justify="center">
        <el-col class="LogoBox" :span="6">
            <div class="LoginLogo">
                        <el-image style="width: 360.8px; height: 318px" :src="require('@/assets/Cloud2.jpg')"></el-image>
                    </div>
        </el-col>
        <el-col class="SearchBox" :span="11">
            <el-row>
                <span class="SearchTitle">学者查询</span>
            </el-row>
            <el-row class="SearchInfo">
                <el-col :span="19">
                    <el-form :label-position="labelPosition" label-width="50px" :model="searchForm">
                        <el-form-item label="姓名"  required>
                            <el-input v-model="searchForm.name" placeholder="请输入姓名（必填）"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="机构">
                            <el-input style="width: 70%;" v-model="searchForm.region" placeholder="请尽量写详细，如xx大学，xx院系等"></el-input>
                        </el-form-item> -->
                    </el-form>
                </el-col>
                <el-col :span="5" class="SearchInfo3">
                    <el-button type="primary" icon="el-icon-search" style="height: 50px; width:50px;" circle @click="searchScholarResult"></el-button>
                </el-col>
            </el-row>
            <el-row>
                <span class="ScholarRecommendTitle">每日推荐学者</span>
            </el-row>
              <el-row type="flex" justify="center">
                <el-col class="ScholarRecommend" :span="24">
                    <el-row class="Carousel">
                        <el-carousel height="130px" :interval="5000" arrow="always" trigger="click" indicator-position="none">
                            <el-carousel-item v-for="item in recommendList" :key="item.id" >
                            <el-row class="ContentBox">
                                <el-col class="Avatar" :offset="4" :span="5" @click.native=toProfile(item.id)>
                                    <el-avatar :size=90 :src="circleUrl"></el-avatar>
                                </el-col>
                                <el-col class="ContentOuter" :span="12" @click.native=toProfile(item.id)>
                                    <el-row class="Content">
                                        <span> {{item.name}}</span>
                                    </el-row>
                                    <el-row class="Content2">
                                        <span> {{item.orgs}}</span>
                                    </el-row>
                                    <el-row class="Content3">
                                        <span> 文章数：{{item.n_pubs}}&nbsp;&nbsp;</span>
                                        <span> 被引量：{{item.n_citation}}</span>
                                    </el-row>
                                </el-col>
                            </el-row>
                            </el-carousel-item>
                        </el-carousel>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
  </el-row>
  <el-row type="flex" justify="center">
    <el-col :span="9" class="tableBox">
        <div class="tableTitle">
    <span>影响力排行</span>
        </div>
    <el-table
    :data="tableData2"
    stripe
    style="width: 100%"
    :header-cell-style="{background : '#F0E5FF', color : '#4A4A4A'}"
    :cell-class-name="cellCSS">
    <el-table-column
      type=index
      label="排行"
      width="50"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="n_pubs"
      label="文章数"
      width=""
      align="center"
      sortable>
    </el-table-column>
    <el-table-column
      prop="n_citation"
      label="被引数"
      width=""
      align="center"
      sortable>
    </el-table-column>
    <el-table-column
      prop="h_index"
      label="H指数"
      width=""
      align="center"
      sortable>
    </el-table-column>
  </el-table>
    </el-col>

    <!-- <el-col :span="6" class="tableBox">
        <div class="tableTitle">
    <span>热门学者排行</span>
        </div>
    <el-table
    :data="tableData2"
    stripe
    style="width: 100%"
    :header-cell-style="{background : '#F0E5FF', color : '#4A4A4A'}">
    <el-table-column
      type=index
      label="排行"
      width="50"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="">
    </el-table-column>
    <el-table-column
      prop="totalVisit"
      label="总访问量"
      width=""
      align="center"
      sortable>
    </el-table-column>
  </el-table>
    </el-col> -->
    <!-- <el-col :span="16">
        <el-col :span="8">
            <div class="extraInfo">
                a
            </div>
        </el-col>
        <el-col :span="8">
            <div class="extraInfo">
                a
            </div>
        </el-col>
        <el-col :span="8">
            <div class="extraInfo">
                a
            </div>
        </el-col>
    </el-col> -->
  </el-row>
  <div class="page_bottom">
      <bottom-info></bottom-info>
    </div>
  </div>
</template>

<script>
import circleUrl from '../assets/scholarProfile/用户头像.png'
import homePage from '../components/homePage.vue'
import bottomInfo from "../components/bottomInfo.vue";

export default {
    components: {
        'bottom-info':bottomInfo, //挂载底部组件
        homePage,
    },
    data() {
        return {
        labelPosition: 'right',
        searchForm: {
          name: '',
          region: '',
        },
        backgroundImg:"@/assets/Cloud.png",
        circleUrl: circleUrl,
        recommendList: [],
        imgList: [
            {
                id:1,
                src: require('@/assets/Clogo.png'),
                name:'许梓荣',
                organization:'浙江大学饲料科学研究所',
                paperCount:948,
                useCount:26054,
            },
            {
                id:2,
                src: require('@/assets/Clogo.png'),
                name:'俞孔坚',
                organization:'北京大学景观设计学研究院',
                paperCount:384,
                useCount:48282,
            },
            {
                id:3,
                src: require('@/assets/Clogo.png'),
                name:'华先胜',
                organization:'微软亚洲研究院',
                paperCount:1,
                useCount:0,
            },
            {
                id:4,
                src: require('@/assets/Clogo.png'),
                name:'毛景文',
                organization:'中国地质科学院矿产资源研究所',
                paperCount:815,
                useCount:43858,
            },
            {
                id:5,
                src: require('@/assets/Clogo.png'),
                name:'赵世瑜',
                organization:'北京师范大学历史系',
                paperCount:120,
                useCount:3399,
            },
            {
                id:6,
                src: require('@/assets/Clogo.png'),
                name:'薛艺兵',
                organization:'中国艺术研究院音乐研究所',
                paperCount:59,
                useCount:2367,
            },
        ],
        tableData2:[],
        tableData: [{
          ranking: 1,
          name: '王小虎',
          paperCount: 66,
          useCount: 77,
          totalVisit: 666,
        },
        {
          ranking: 2,
          name: '王小虎',
          paperCount: 66,
          useCount: 77,
          totalVisit: 656,
        },
        {
          ranking: 3,
          name: '王小虎',
          paperCount: 66,
          useCount: 78,
          totalVisit: 466,
        },
        {
          ranking: 4,
          name: '王小虎',
          paperCount: 46,
          useCount: 77,
          totalVisit: 366,
        },
        {
          ranking: 5,
          name: '王小虎',
          paperCount: 66,
          useCount: 79,
          totalVisit: 266,
        },
        {
          ranking: 6,
          name: '王小虎',
          paperCount: 56,
          useCount: 77,
          totalVisit: 166,
        },
        {
          ranking: 7,
          name: '王小虎',
          paperCount: 66,
          useCount: 77,
          totalVisit: 66,
        },
        {
          ranking: 8,
          name: '王小虎',
          paperCount: 66,
          useCount: 77,
          totalVisit: 65,
        },
        {
          ranking: 9,
          name: '王小虎',
          paperCount: 66,
          useCount: 77,
          totalVisit: 63,
        },
        {
          ranking: 10,
          name: '王小虎',
          paperCount: 66,
          useCount: 77,
          totalVisit: 6,
        },
        ]
        }
    },
    methods: {
        cellCSS({rowIndex, columnIndex}) {
            if(rowIndex === 0 && columnIndex === 0) {
                return 'cellCSS1';
            }
            if(rowIndex === 1 && columnIndex === 0) {
                return 'cellCSS2';
            }
            if(rowIndex === 2 && columnIndex === 0) {
                return 'cellCSS3';
            }
        },
        searchScholarResult() {
            if(this.searchForm.name === "") {
                this.$message.warning("名字不可为空");
                return;
            }
            this.$router.push("/scholarresult" + "/?name=" + this.searchForm.name);
        },
        toProfile(userId) {
            this.$router.push("/scholarprofile/" + userId);
        },
        getScholarInfo() {
            let obj = {
                search: {
                    name:'a',
                    relative_paper_num: 0,
                    sort: 'n_citation',
                },
            };

            console.log(JSON.stringify(obj));

            this.$axios({
                method: "post",
                url: "/api/esQAuthor",
                data: JSON.stringify(obj),
                })
                .then((res) => {
                    console.log(res);
                    this.tableData2 = res.data.post.author;

                    for(let i = 0; i < this.tableData2.length; i++) {
                        if(!('n_pubs' in this.tableData2[i])) {
                            this.tableData2[i].n_pubs = 0;
                        }
                        if(!('n_citation' in this.tableData2[i])) {
                            this.tableData2[i].n_citation = 0;
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
        },
        getScholarRank() {
            this.$axios({
                method: "get",
                url: "/api/getAuthorRank?sort=-n_citation",
                })
                .then((res) => {
                    console.log(res);
                    this.tableData2 = res.data.post.author;
                })
                .catch((err) => {
                    console.log(err);
                })
        },
        getRecommendScholar() {
            this.$axios({
                method: "get",
                url: "/api/getRecommendAuthor",
                })
                .then((res) => {
                    console.log(res);
                    this.recommendList = res.data.post.author;

                    for(let i = 0; i < this.recommendList.length; i++) {
                        if('orgs' in this.recommendList[i]) {
                            this.recommendList[i].orgs = this.recommendList[i].orgs[0];
                        }
                        else {
                            this.recommendList[i].orgs = "-";
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
        },

    },
    created() {
        // this.getScholarInfo();
        this.getScholarRank();
        this.getRecommendScholar();
    }

}
</script>

<style>
.Carousel .el-carousel__arrow {
    color: rgb(195, 195, 195);
    background-color: rgb(255, 255, 255);
    font-size: 30px;
}
.Carousel .el-carousel__arrow:hover {
    background-color: rgb(255, 255, 255);
}
.el-table .cellCSS1 {
  color: rgb(60, 0, 255);
  font-weight: bold;
  font-size: 20px;
}
.el-table .cellCSS2 {
  color: rgb(140, 0, 255);
  font-weight: bold;
  font-size: 18px;
}
.el-table .cellCSS3 {
  color: rgb(208, 0, 255);
  font-weight: bold;
  font-size: 16px;
}
</style>

<style scoped>
.page_bottom{
  height:110px;
  width:100%;
  margin:auto;
  margin-top: 10px;
}
.SearchInfo /deep/ .el-input__inner:focus{
  border-color: rgb(70, 70, 207);
}
.LogoBox {
    /* border: 1px solid black; */
    /* padding-top: 10px; */
    margin: 0px 0px 10px 10px;
    text-align: center;
}
.SearchBox {
    /* border: 1px solid black; */
    margin: 0px 10px 10px 0px;
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 20px;
    border-radius: 5px;
    border: 1px solid rgb(230, 230, 230);
    /* box-shadow: 0px 0px 10px 1px #d4d4d4; */
}
.SearchTitle{
    font-size: 20px;
    font-weight: bold;
}
.SearchInfo {
   margin-top: 10px; 
}
.SearchInfo2 {
    margin-top: 10px;
}
.SearchInfo3 {
    position: relative;
    top: -5px;
    text-align: center;
}
.SearchInfo3 button{
    background-color: rgb(145, 162, 255);
    border: none;
}
.SearchInfo3 button:hover {
    background-color: rgb(160, 174, 255);
}
.el-carousel__item:nth-child(2n) {
    /* background-color: rgba(229, 233, 253); */
}
.el-carousel__item:nth-child(2n+1) {
    /* background-color: rgba(217, 222, 253); */
    /* background-image: url("@/assets/Clogo.png"); */
}
.carousel_image_type {
    /* width: 100%; */
    /* height: 1%; */
    position: absolute;
    /* border: 10px solid black; */
}
.ScholarRecommend {
    /* border: 1px solid rgb(209, 209, 209); */
    box-shadow: 0px 5px 8px 1px #e3d5ff;
    margin-top: 20px;
    /* text-align: center; */
}
.ScholarRecommendTitle {
    font-size: 20px;
    font-weight: bold;
}
.Carousel {
    /* margin-top: 15px; */
}
.ContentBox {
    /* border: 1px solid black; */
    /* padding-left: 100px; */
    margin-top: 5px;
}
.Avatar {
    /* position: absolute; */
    /* border: 1px solid black; */
    margin-top: 10px;
}
.Avatar:hover, .ContentOuter:hover {
    cursor: pointer;
}
.ContentOuter {
    /* border: 1px solid black; */
}
.Content {
    /* border: 1px solid black; */
    margin-top: 15px;
    font-size: 22px;
    font-weight: bold;
}
.Content2 {
    /* border: 1px solid black; */
    margin-top: 5px;
}
.Content3 {
    /* border: 1px solid black; */
    margin-top: 5px;
    font-size: 12px;
    color:grey;
}
.tableBox {
    border: 1px solid rgb(230, 230, 230);
    margin: 20px;
    /* text-align: center; */
    padding: 20px;
}
.tableBox span{
    font-size: 22px;
    font-weight: bold;
}
.tableTitle {
    /* border: 1px solid black; */
    margin-left: 10px;
    margin-bottom: 10px;
}
</style>